import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import './index.less';
import http from "../../model/http";
import { SearchBar, Toast, List, Button, Modal, Tabs, InputItem, PullToRefresh } from 'antd-mobile'
import Header from "../../components/header/Header";  
let page = 1;
// const h = document.documentElement.clientHeight - 100;
function OperationLog(){
    const history = useHistory();
    const [searchValue, setSearchValue] = useState('')
    const [load,setLoad] = useState(false);
    const [h, setH] = useState(0)
    const [list, setList] = useState([])
    useEffect(async () => {
        setH(document.documentElement.clientHeight - document.querySelector('.am-search').offsetHeight) 

        list.length || getList();
    
        return ()=>{
          page=1
        }
       
    }, [])
     
    
    const searchSubmit = () => {
        console.log(searchValue)
        page=1 
        setList([])
        getList('clearArr')
    }
    
    
    
    const getList = (status)=>{
        (async ()=>{
          setLoad(true);
          const _list = await http.post('/manager/logRecord',{ 
            page:page,
            items:10, 
            customerParams: searchValue.replace(/\s*/g, '')
          })
          setTimeout(()=>{setLoad(false)},800)
          if(status == 'clearArr'){
            setList([..._list.data]);
          }else{
            if(!_list.data.length) return;
            // page++;
            setList([...list,..._list.data]);
          }
          page=page+1
          
        })()
    }
    return (
        <div className="v-operation-log">  
            <SearchBar
                placeholder="员工姓名/顾客姓名/顾客卡号"
                value={searchValue}
                onChange={(value) => setSearchValue(value)}
                onSubmit={() => searchSubmit()}
            />
            <PullToRefresh direction='up' onRefresh={getList} refreshing={load} style={{height:h, overflow:'auto',fontSize:"14px"}}>
            {list.length ? 
                list.map(item => (
                    <div className='v-p18 g-bdrs12 g-bg-f g-mb10 card-box'> 
                        <div className="card-box-flex g-mb10">
                            <p className="left">{item.recorder}</p>
                            <p className="right"></p>
                        </div>
                        <div className="card-box-content g-mb10">
                            {item.name}
                        </div>
                        <div className="card-box-content g-mb10">
                            操作时间：{item.record_date}
                        </div>
                        <div className="card-box-content">
                            {item.remark}
                        </div>
                    </div> 
                ))
                :<div style={{color:'#bbb',textAlign:'center',paddingTop:'20px',fontSize:"14px"}}>暂无数据</div>
            }
                
                

            </PullToRefresh>

            <Header />
        </div>
    );
}
export default OperationLog;